---
title: Faça Deploy do seu Site Astro na AWS
description: Como fazer o deploy do seu site Astro para web usando AWS.
type: deploy
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[AWS](https://aws.amazon.com/) é uma plataforma de hospedagem de aplicações web completa que pode ser utilizada para fazer o deploy de um site Astro.

Para fazer deploy do seu projeto na AWS será necessário a utilização do [console AWS](https://aws.amazon.com/console/). (A maioria dessas ações também pode ser feitas usando o [AWS CLI](https://aws.amazon.com/cli/)). Este guia irá lhe mostrar o passo a passo para fazer deploy do seu site na AWS utilizando o [AWS Amplify](https://aws.amazon.com/amplify/), [hospedagem de websites estáticos com S3](https://aws.amazon.com/s3/), e [CloudFront](https://aws.amazon.com/cloudfront/).

## AWS Amplify

AWS Amplify é um conjunto de ferramentas e funcionalidades especialmente concebidas para que programadores front-end web e mobile construam aplicações completas na AWS de forma rápida e fácil.

1. Crie um novo projeto na Amplify Hosting.

2. Conecte seu repositório ao Amplify.

3. Modifique as configurações de compilação para corresponder ao processo de compilação do seu projeto.

    <PackageManagerTabs>
    <Fragment slot="pnpm">
    ```yaml
    version: 1
    frontend:
      phases:
        preBuild:
          commands:
            - npm i -g pnpm
            - pnpm config set store-dir .pnpm-store
            - pnpm i
        build:
          commands:
            - pnpm run build
      artifacts:
        baseDirectory: /dist
        files:
          - '**/*'
      cache:
        paths:
          - .pnpm-store/**/*
    ```
    </Fragment>
    <Fragment slot="npm">
    ```yaml
    version: 1
    frontend:
      phases:
        preBuild:
          commands:
            - npm ci
        build:
          commands:
            - npm run build
      artifacts:
        baseDirectory: /dist
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```yaml
    version: 1
    frontend:
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            - yarn build
      artifacts:
        baseDirectory: /dist
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
    ```
    </Fragment>
    </PackageManagerTabs>


O Amplify irá fazer deploy do seu site automaticamente e o atualizará quando você enviar um commit no seu repositório.

## Hospedagem de websites estáticos com S3

S3 é o ponto de partida para qualquer aplicação. É onde os arquivos do seu projeto e outros assets são armazenados. O S3 cobra por arquivos armazenados e por número de requisições. Você pode encontrar mais informações sobre o S3 na [documentação da AWS](https://aws.amazon.com/pt/s3).

1. Crie um S3 bucket com o nome do seu projeto.

    :::tip
     O nome do bucket deve ser único globalmente. Nós recomendamos uma combinação do nome do seu projeto e o nome do domínio do seu site.
    :::

2. Desabilite **"Bloquear todo o acesso público"**. Por padrão, a AWS define todos os buckets como privados. Para torná-lo público, você deve desmarcar a opção "Bloquear todo o acesso público" nas propriedades do seu bucket.

3. Faça upload dos arquivos gerados na build localizados em `dist` para o S3. Você pode fazer isso manualmente no console ou usando o AWS CLI. Se você usar o AWS CLI, você pode usar o seguinte comando após [autenticar-se com suas credenciais da AWS](https://docs.aws.amazon.com/pt_br/cli/latest/userguide/cli-configure-files.html):

    ```
    aws s3 cp dist/ s3://<BUCKET_NAME>/ --recursive
    ```

4. Atualize a política do seu bucket para permitir o acesso público. Você pode encontrar esta configuração em **Permissões > Política do bucket**.

    ```json
    {
      "Version": "2012-10-17",
      "Statement": [
        {
          "Sid": "PublicReadGetObject",
          "Effect": "Allow",
          "Principal": "*",
          "Action": "s3:GetObject",
          "Resource": "arn:aws:s3:::<BUCKET_NAME>/*"
        }
      ]
    }
    ```

    :::caution
    Não se esqueça de substituir `<BUCKET_NAME>` com o nome do seu bucket.
    :::

5. Habilite a hospedagem de websites para o seu bucket. Você pode encontrar esta configuração em **Propriedades > Hospedagem de site estático**. Defina seu documento de índice para `index.html` e seu documento de erro para `404.html`. Por fim, você pode encontrar a URL do seu site em **Propriedades > Hospedagem de site estático**.

    :::note
    Se você estiver fazendo deploy de uma aplicação de página única (Single-Page application - SPA), defina seu documento de erro para `index.html`.
    :::

## S3 com CloudFront

CloudFront é um serviço web que oferece capacidades de uma rede de distribuição de conteúdo (Content Delivery Network - CDN). Ele é utilizado para armazenar o conteúdo de um servidor web e distribuí-lo aos usuários finais. O CloudFront cobra por quantidade de dados transferidos. Adicionar o CloudFront ao seu S3 bucket é mais econômico e proporciona uma entrega mais rápida.

Para conectar o S3 ao CloudFront, crie uma distribuição do CloudFront com os seguintes valores:
  - **Origin domain:** O endpoint do site estático do seu bucket S3. Você pode encontrar seu endpoint em **Propriedades > Hospedagem de site estático**. Alternativamente, você pode selecionar seu bucket S3 e clicar no balão de chamada para substituir o endereço do seu bucket pelo endpoint estático do seu bucket.
  - **Viewer protocol policy:** "Redirect HTTP to HTTPS"

Essa configuração servirá seu site usando a rede CDN do CloudFront. Você pode encontrar a URL da distribuição do CloudFront em **Distributions > Domain name** no bucket.

:::note
Ao conectar o CloudFront a um endpoint de site estático do S3, você depende das políticas de bucket do S3 para controle de acesso. Consulte [hospedagem de websites estáticos com S3](/pt-br/guides/deploy/aws/#hospedagem-de-websites-estáticos-com-s3) para mais informações sobre políticas de bucket.
:::

## Entrega contínua com GitHub Actions

Existem várias maneiras de configurar a Entrega contínua para a AWS. Uma possibilidade para o código hospedado no GitHub é usar [GitHub Actions](https://github.com/features/actions) para fazer deploy de seu site toda vez que você enviar um commit.

1. Crie uma nova política em sua conta da AWS usando [IAM](https://aws.amazon.com/iam/) com as seguintes permissões. Essa política permitirá que você faça upload de arquivos compilados para o seu bucket S3 e invalide os arquivos de distribuição do CloudFront quando enviar um commit.

    ```json
    {
      "Version": "2012-10-17",
      "Statement": [
          {
              "Sid": "VisualEditor0",
              "Effect": "Allow",
              "Action": [
                  "s3:PutObject",
                  "s3:ListBucket",
                  "s3:DeleteObject",
                  "cloudfront:CreateInvalidation"
              ],
              "Resource": [
                  "<DISTRIBUTION_ARN>",
                  "arn:aws:s3:::<BUCKET_NAME>/*",
                  "arn:aws:s3:::<BUCKET_NAME>"
              ]
          }
      ]
    }
    ```

    :::caution
    Não se esqueça de substituir `<DISTRIBUTION_ARN>` e `<BUCKET_NAME>`. Você pode encontrar o DISTRIBUTION_ARN em **CloudFront > Distributions > Details**.
    :::

2. Crie um novo usuário IAM e anexe a política ao usuário. Isso fornecerá sua `AWS_SECRET_ACCESS_KEY` e `AWS_ACCESS_KEY_ID`.

3. Adicione este modelo de workflow ao seu repositório em `.github/workflows/deploy.yml` e envie-o para o GitHub. Você precisará adicionar `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, `BUCKET_ID`, e `DISTRIBUTION_ID` como "secrets" em seu repositório no GitHub em **Settings** > **Secrets** > **Actions**. Clique em <kbd>New repository secret</kbd> para adicioná-los.

    ```yaml
    name: Deploy Website

    on:
      push:
        branches:
          - main

    jobs:
      deploy:
        runs-on: ubuntu-latest
        steps:
          - name: Checkout
            uses: actions/checkout@v4
          - name: Configure AWS Credentials
            uses: aws-actions/configure-aws-credentials@v1
            with:
              aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
              aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
              aws-region: us-east-1
          - name: Instalar módulos
            run: npm ci
          - name: Gerar build da aplicação
            run: npm run build
          - name: Deploy para o S3
            run: aws s3 sync --delete ./dist/ s3://${{ secrets.BUCKET_ID }}
          - name: Criar invalidação no Cloudfront
            run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"
    ```

    :::note
    Seu `BUCKET_ID` é o nome do seu bucket S3. Seu `DISTRIBUTION_ID` é o ID de distribuição do CloudFront. Você pode encontrar o ID de distribuição do CloudFront em **CloudFront > Distributions > ID**
    :::
